<template>
  <view class="splash">
    <view class="nav-container" v-if="topBar.style ==='custom' && index === list.length-1">
      <view class="status-contents" :style="{marginTop: topBar.statusBarHeight+'px'}">
        <image src="../../static/hei_cha@2x.png" mode="widthFix" class="back" @click="toBack"></image>
      </view>
    </view>
    <image :src="list[index]" style="width: 750rpx" mode="widthFix"></image>
    <view class="bottom_container" v-if="index === list.length-1 && splashBuy === 1">
      <view class="product">{{ mainProduct.price }}元/全科永久VIP</view>
      <view class="btn" @click="toPay">{{ text }}</view>
      <view class="protocol-container">
        <text class="title1">成为会员即表示同意</text>
        <text class="title2" @click="toVipProtocol">《会员协议》</text>
      </view>
    </view>
    <view class="bottom_container" v-else>
      <view class="btn" @click="next">{{ text }}</view>
    </view>
    <!--    <uni-popup ref="backPopup" type="center" v-if="index === 3" :mask-click="false">-->
    <!--      <view class="back_popup_container">-->
    <!--        <image class="img-close" src="@/static/login/guanbi.png" @click="dismissPage"></image>-->
    <!--        <view class="flex-col title_container">-->
    <!--          <text class="title">-->
    <!--            数据统计显示，99.99%的会员-->
    <!--          </text>-->
    <!--          <text class="title">-->
    <!--            都能顺利通过考试-->
    <!--          </text>-->
    <!--        </view>-->
    <!--        <view class="product">{{ mainProduct.price }}元/全科永久VIP</view>-->
    <!--        <view class="pay_btn" @click="toPay">立即开通会员</view>-->
    <!--        <view class="protocol-container">-->
    <!--          <text class="title1">成为会员即表示同意</text>-->
    <!--          <text class="title2" @click="toVipProtocol">《会员协议》</text>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </uni-popup>-->
    <VIPQuanyiDialog ref="backPopup" @finish="dismissPage"></VIPQuanyiDialog>
    <Pay ref="pay" @success="onPaySuccess" @dismiss="onPayDismiss"></Pay>
    <LoginView ref="LoginView" page="splash" @login_success="onLoginSuccess"></LoginView>
  </view>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
import Pay from "@/components/Pay.vue";
import LoginView from "@/components/LoginView/LoginView.vue";
import VIPQuanyiDialog from "@/components/VIPQuanyiDialog.vue";

export default {
  name: "splash",
  components: {VIPQuanyiDialog, Pay, LoginView},
  data() {
    return {
      index: 0,
      payFailCount: 0,
      list: [
        '/static/splash/1@2x.png',
        '/static/splash/2@2x.png',
        '/static/splash/3@2x.png',
        '/static/splash/4@2x.png',
        '/static/splash/5@2x.png',
      ]
    }
  },
  computed: {
    ...mapGetters(['mainProduct', 'settings', 'platform', 'canPay', 'topBar', 'mine', 'haveVIP', 'haveAuths', 'loginBeforePay', 'splashBuy']),
    text() {
      // if (this.index === 3) {
      //   return '开始练习'
      // }
      return '继续'
    },
    isLogin() {
      if (this.haveVIP) {
        return true
      }

      return this.haveAuths
    },
  },
  onLoad(query) {
    this.dismissHomeNeedPushVIP()
  },
  onBackPress(args) {
    return true
  },
  methods: {
    ...mapActions('args', ['dismissHomeNeedPushVIP']),
    ...mapActions(['refreshUser']),
    dismissPage() {
      uni.switchTab({
        url: '/pages/home/home'
      })
    },
    toBack() {
      if (this.settings.splashWanliu && this.canPay) {
        this.$refs.backPopup.open()
      } else {
        uni.switchTab({
          url: '/pages/home/home'
        })
      }

      // } else {
      //   this.$refs.backPopup.open()
      // }
    },
    async next() {
      if (this.lock) {
        return
      }

      this.lock = true

      setTimeout(() => {
        this.lock = false
      }, 100)

      console.log(this.index, this.list.length - 1)
      if (this.index < this.list.length - 1) {
        this.index++
      } else {
        if (this.splashBuy === 3 || this.splashBuy === 2) {
          uni.redirectTo({
            url: '/pages/vip/vip?from=guid'
          })
        } else {
          uni.switchTab({
            url: '/pages/home/home'
          })
        }
      }
    },
    toPay() {
      if (!this.isLogin && this.loginBeforePay) {
        this.$refs.LoginView.open()
      } else if (this.canPay) {
        if (this.haveVIP) {
          console.log('已经是vip')
          uni.switchTab({
            url: '/pages/home/home'
          })
          return
        }
        console.log('还不是vip')
        this.$refs.pay.open({mode: 'product', from: 'vip', product: this.mainProduct})
      } else {
        uni.switchTab({
          url: '/pages/home/home'
        })
      }
    },
    onLoginSuccess() {
      this.$refs.pay.open({mode: 'product', from: 'vip', product: this.mainProduct})
    },
    onPayDismiss() {
      console.log('onPayDismiss')
      this.payFailCount++
      if (this.payFailCount === 2) {
        uni.switchTab({
          url: '/pages/home/home'
        })
      }
    },
    async onPaySuccess() {
      await this.refreshUser()
      uni.switchTab({
        url: '/pages/home/home'
      })
    },
    toVipProtocol() {
      uni.navigateTo({
        url: '/pages/webview/webview?type=vip'
      })
    },
  }
}
</script>
<style scoped lang="scss">
.back_popup_container {
  width: 650upx;
  background-color: #fff;
  border-radius: 30rpx;
  position: relative;
  background-image: url("http://down.qwdata.vip/app_icon/1702973181443");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  padding-bottom: 60rpx;

  .img-close {
    position: absolute;
    top: 48upx;
    left: 48upx;
    width: 26upx;
    height: 26upx;
  }

  .title_container {
    margin-top: 100rpx;

    .title {
      color: #090909;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }

  .product {
    margin-top: 40rpx;
    text-align: center;
    color: #B1B1B1;
  }

  .pay_btn {
    height: 108rpx;
    border-radius: 100rpx;
    margin: 0 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8dcc6;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10rpx;
  }
}

.protocol-container {
  text-align: center;

  .title1 {
    font-size: 22upx;
    color: #B1B1B1;
  }

  .title2 {
    font-size: 22upx;
    color: #5A5A5A;
  }
}

.product {
  margin-bottom: 40rpx;
  text-align: center;
  color: #B1B1B1;
}

.splash {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: #e2ecfc;

  .nav-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    color: rgba(240, 173, 78, 0);

    .status-contents {
      height: 44px;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      display: flex;
      color: #fff;
      margin-top: var(--status-bar-height);

      .back {
        width: 36rpx;
        height: 36rpx;
        align-self: center;
      }

      .title {
        align-self: center;
        margin: 0 auto;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }

  .bottom_container {
    position: fixed;
    left: 50rpx;
    right: 50rpx;
    bottom: 100rpx;

    .protocol-container {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 30rpx;
    }
  }

  .btn {
    width: 650rpx;
    height: 114rpx;
    background-color: rgba(63, 99, 248, 1);
    border-radius: 100rpx;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
